<html>
<body>
	<canvas id="myCanvas" width="160" height="160"></canvas>
	<script>
		var pixel_size = 8;
	
		var shapeArray = [
			[0,0,0,0,0,0,0,0],
			[0,0,1,0,0,1,0,0],
			[0,0,0,0,0,0,0,0],
			[0,0,0,1,1,0,0,0],
			[1,0,0,0,0,0,0,1],
			[0,1,0,0,0,0,1,0],
			[0,0,1,1,1,1,0,0],
			[0,0,0,0,0,0,0,0]
		];
		
		function drawArray(array) {
			for (var y=0, count_y = array.length; y < count_y; y++) {
				for (var x=0, count_x = array[y].length; x < count_x; x++) {
					if (array[y][x] == 1) {
						context.fillStyle = '#00F';
					} else {
						context.fillStyle = 'white';
					}
					context.fillRect(x*pixel_size, y*pixel_size, pixel_size, pixel_size);
				}
			}
		}
		
		
		var canvas = document.getElementById('myCanvas');
		var context = canvas.getContext('2d');
		
		drawArray(shapeArray);
	</script>
</body>
</html>